<template>
  <div class="scatter">
    <e-charts :option="option" autoresize></e-charts>
  </div>
</template>

<script>

import ECharts from 'vue-echarts'
import { use } from 'echarts/core'

import { CanvasRenderer } from 'echarts/renderers'
import { ScatterChart } from 'echarts/charts'

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'

use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ScatterChart,
  LegendComponent,
  CanvasRenderer
])

export default {
  components: {
    ECharts
  },
  data () {
    return {
      option: {},
      data1: [
        ['2012-03-10', 6500, 'jack', '重庆工程学院'],
        ['2012-03-10', 9116, 'jack', '重庆理工大学'],
        ['2012-03-10', 6968, 'jack', '重庆电子工程职业学院'],
        ['2012-03-10', 4333, 'jack', '重庆科技学院'],
        ['2012-03-10', 8000, 'jack', '重庆第二师范学院'],
        ['2012-03-10', 6760, 'jack', '重庆工商职业学院'],
        ['2012-03-10', 7000, 'jack', '重庆人文科技学院'],
        ['2012-03-10', 6166, 'jack', '重庆信息技术职业学院'],
        ['2012-03-10', 7812, 'jack', '重庆邮电大学'],
        ['2012-03-10', 9166, 'jack', '重庆工商大学'],
        ['2012-03-10', 5333, 'jack', '重庆机电职业技术学院'],
        ['2012-03-10', 5000, 'jack', '重庆广播电视大学'],
        ['2012-03-10', 8000, 'jack', '重庆能源职业学院'],
        ['2012-03-10', 7500, 'jack', '重庆三峡学院'],
        ['2012-03-10', 6392, 'jack', '重庆邮电大学移通学院'],
        ['2012-03-10', 5916, 'jack', '重庆工业职业技术学院'],
        ['2012-03-10', 7000, 'jack', '重庆市彭水县芦塘中学'],
        ['2012-03-10', 5000, 'jack', '重庆大学'],
        ['2012-03-10', 4000, 'jack', '重庆旅游职业学院'],
        ['2012-03-10', 5666, 'jack', '重庆航天职业技术学院'],
        ['2012-03-10', 5000, 'jack', '重庆房地产职业学院'],
        ['2012-03-10', 7760, 'jack', '重庆交通大学'],
        ['2012-03-10', 7000, 'jack', '重庆电讯职业学院'],
        ['2012-03-10', 7500, 'jack', '重庆三峡职业学院'],
        ['2012-03-10', 4700, 'jack', '重庆市开县巨龙中等职业技术学校'],
        ['2012-03-10', 7500, 'jack', '重庆城市管理职业学院'],
        ['2012-03-10', 7250, 'jack', '重庆科创职业学院'],
        ['2012-03-10', 6000, 'jack', '重庆工商大学派斯学院'],
        ['2012-03-10', 7500, 'jack', '重庆经贸职业学院'],
        ['2012-03-10', 6375, 'jack', '重庆建筑工程职业学院'],
        ['2012-03-10', 6000, 'jack', '重庆市江津中学校'],
        ['2012-03-10', 8066, 'jack', '重庆文理学院'],
        ['2012-03-10', 9000, 'jack', '重庆大学城市科技学院'],
        ['2012-03-10', 6333, 'jack', '重庆工程职业技术学院'],
        ['2012-03-10', 5200, 'jack', '重庆青年职业技术学院'],
        ['2012-03-10', 9000, 'jack', '重庆医科大学'],
        ['2012-03-10', 6500, 'jack', '重庆工贸职业技术学院'],
        ['2012-03-10', 6000, 'jack', '重庆水利电力职业技术学院'],
        ['2012-03-10', 3000, 'jack', '重庆市奉节夔门高级中学校'],
        ['2012-03-10', 5000, 'jack', '重庆高级中学校'],
        ['2012-03-10', 3000, 'jack', '重庆机械技师学院'],
        ['2012-03-10', 7500, 'jack', '重庆电信职业学院'],
        ['2012-03-10', 6000, 'jack', '重庆市万州高级技工学校']
      ]
    }
  },
  created () {
    var schema = [
      { name: 'date', index: 0, text: '日期' },
      { name: 'salary', index: 1, text: '薪资' },
      { name: 'username', index: 2, text: '姓名' },
      { name: 'education', index: 3, text: '学历' }
    ]
    var itemStyle = {
      opacity: 0.8,
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      shadowColor: 'rgba(0,0,0,0.3)'
    }
    this.option = {
      title: {
        text: '就业城市',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: 35
        },
        top: '5%'
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'cross'
        },
        backgroundColor: ['rgba(255,255,255,0.7)'],
        formatter: function (obj) {
          var value = obj.value
          return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                obj.seriesName + ' ' + value[2] + '：' +
                value[1] +
                '</div>' +
                schema[3].text + '：' + value[3] + '<br>'
        }
      },
      xAxis: {
        type: 'time',
        name: '工作时间'
      },
      yAxis: {
        type: 'value',
        name: '薪资',
        max: 25000,
        min: 0
      },
      color: ['#fe4a70'],
      grid: [
        { top: '20%' }

      ],
      // TODO: legend数据需要添加
      legend: {
        top: 110,
        data: ['Java1期'],
        textStyle: {
          fontSize: 16,
          color: '#fff'
        }
      },
      visualMap: [{
        left: 'right',
        top: '10%',
        dimension: 1,
        min: 0,
        max: 250000,
        itemWidth: 30,
        itemHeight: 120,
        calculable: true,
        precision: 0,
        text: ['圆形大小：工资'],
        textGap: 30,
        inRange: {
          symbolSize: [10, 70]
        },
        textStyle: {
          color: '#fff'
        },
        outOfRange: {
          symbolSize: [10, 70],
          color: ['rgba(255,255,255,0.4)']
        },
        controller: {
          inRange: {
            color: ['#c23531']
          },
          outOfRange: {
            color: ['#999']
          }
        }
      }
      ],
      series: [
        {
          // TODO: name和data字段需要更换
          name: 'Java1期',
          symbolSize: 15,
          data: this.data1,
          type: 'scatter',
          itemStyle: itemStyle
        }
      ]
    }
  }
}
</script>

<style scoped>

  .scatter {
    width: 100%;
    height: 100vh;
  }
  .echarts canvas {
    width: 100% !important;
  }
</style>
